<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/stores'
import { ref, onMounted } from 'vue'
import GlobalLoading from '@/components/GlobalLoading.vue'
import { useRouter, useRoute } from 'vue-router'

const { t, locale } = useI18n()
const appStore = useAppStore()
const { locale: storeLocale } = storeToRefs(appStore)

// 初始化时同步 i18n 语言
locale.value = storeLocale.value
function switchLang(lang: string) {
  locale.value = lang
  appStore.setLocale(lang)
}

// 全局 loading 控制
const loadingRef = ref()
function showLoading() {
  loadingRef.value?.show()
}
function hideLoading() {
  loadingRef.value?.hide()
}
// 可选：挂载到 window 方便全局调用
onMounted(() => {
  window.$showLoading = showLoading
  window.$hideLoading = hideLoading
})

declare global {
  interface Window {
    $showLoading: () => void
    $hideLoading: () => void
  }
}
// 刷新页面时，同步 i18n 语言，并显示全局 loading
onMounted(() => {
  locale.value = storeLocale.value
  showLoading()
  setTimeout(() => {
    hideLoading()
  }, 1000)
})

const router = useRouter()
const route = useRoute()

// 按钮与路由的映射
const navMap = [
  { idx: 1, path: '/' },
  { idx: 2, path: '/about' },
  { idx: 3, path: '/jy' },
  { idx: 4, path: '/sj' },
  { idx: 5, path: '/dj' },
  { idx: 6, path: '/fx' }
]

// 跳转方法
function navClick(idx: number) {
  const nav = navMap.find(n => n.idx === idx)
  if (nav) router.push(nav.path)
}

// 判断高亮
function isActive(idx: number) {
  const nav = navMap.find(n => n.idx === idx)
  if (!nav) return false
  if (nav.path === '/') {
    return route.path === '/'
  }
  return route.path.startsWith(nav.path)
}
</script>


<template>
  <GlobalLoading ref="loadingRef" />
  <div class="layout">
    <div class="home">
      <div class="header">
        <div class="header-left">
          <div class="nav-one" :class="{ 'nav-xz': isActive(1) }" @click="navClick(1)">国资总览</div>
          <div class="nav-two" :class="{ 'nav-xz': isActive(2) }" @click="navClick(2)">投资管理</div>
          <div class="nav-three" :class="{ 'nav-xz': isActive(3) }" @click="navClick(3)">经济运行</div>
        </div>
        <div class="header-center">数字企业大数据监管平台</div>
        <div class="header-right">
          <div class="nav-four" :class="{ 'nav-xz': isActive(4) }" @click="navClick(4)">三重一大</div>
          <div class="nav-five" :class="{ 'nav-xz': isActive(5) }" @click="navClick(5)">党建管理</div>
          <div class="nav-six" :class="{ 'nav-xz': isActive(6) }" @click="navClick(6)">风险分析</div>
        </div>
      </div>

    </div>
    <!-- <div style="margin: 16px 0;">
    <button @click="switchLang('zh')">中文</button>
    <button @click="switchLang('en')">English</button>
    <button @click="showLoading">显示Loading</button>
    <button @click="hideLoading">隐藏Loading</button>
  </div>
  <div>{{ t('message.hello') }}</div>
  <div>{{ t('message.welcome') }}</div> -->
    <router-view />
    <div class="footer">

    </div>
  </div>
</template>
<style scoped lang="less">
.layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: url('/static/img/BG.jpg') no-repeat center center;
  /* 背景图片100%宽度、高度 */
  background-size: 100% 100%;
}

.home {
  width: 100%;
  height: 7%;
  // background: #000;
  display: flex;
  color: #fff;

  .header {
    height: 100%;
    width: 100%;
    display: flex;

    .header-center {
      font-size: 8px;
      font-weight: bold;
      text-align: center;
      line-height: 8px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .header-left {
      font-size: 5px;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-around;

      >div:nth-child(2) {
        position: relative;
        top: 7px;
      }

      >div:nth-child(3) {
        position: relative;
        top: 10px;
      }


    }

    .header-right {
      font-size: 5px;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-around;

      >div:nth-child(2) {
        position: relative;
        top: 7px;
      }

      >div:nth-child(1) {
        position: relative;
        top: 10px;
      }
    }

    .header-center {
      // 来回动态渐变的动画效果 
      background: linear-gradient(to right, #a5eff1 0%, #409eff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradient 3s linear infinite;
      background-size: 200% 100%;
      background-position: 100% 0;
    }

    >div {
      flex: 1;
    }
  }
}

@keyframes gradient {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.nav-xz {
  /* 你的高亮样式 */
  /* 你的高亮样式 */
  background: url(/static/img/选中光效.png) no-repeat center center;
  color: rgb(78, 143, 241);
}

.footer {
  width: 100vw;
  height: 7%;
}
</style>
